import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import {
    BrowserRouter as Router,
    Route,
    Link
} from 'react-router-dom';
import { Menu, ActivityIndicator, NavBar } from 'antd-mobile';
import './../css/menu.css';
// const data = [
//     {
//         value: '1',
//         label: 'Food',
//     }, {
//         value: '2',
//         label: 'Supermarket',
//     },
//     {
//         value: '3',
//         label: 'Extra',
//         isLeaf: true,
//     },
// ];
const data = [
    {
        value: '1',
        label: '男士',
        children: [
            {
                label: '外套',
                value: '1',
                // disabled: false,
            },
            {
                label: '裤子',
                value: '2',
            }, {
                label: '寸衫',
                value: '3',
            }, {
                label: '鞋子',
                value: '4',
            }, {
                label: '钱包',
                value: '5',
            }, {
                label: '皮带',
                value: '6',
            }, {
                label: '手表',
                value: '7',
            }],
    }, {
        value: '2',
        label: '女士',
        children: [
            {
                label: '外套',
                value: '1',
            }, {
                label: '寸衫',
                value: '2',
                // disabled: true,
            }, {
                label: '裤子',
                value: '3',
            }, {
                label: '鞋子',
                value: '4',
            }],
    },
    {
        value: '3',
        label: '儿童',
        // isLeaf: true,
        children: [
        {
            label: '外套',
            value: '1',
        }, {
            label: '寸衫',
            value: '2',
            // disabled: true,
        }, {
            label: '耳机',
            value: '3',
        }, {
            label: '鞋子',
            value: '4',
        }],
    },
    {
        value: '4',
        label: '成人',
        // isLeaf: true,
        children: [
        {
            label: '外套',
            value: '1',
        }, {
            label: '衣服',
            value: '2',
            // disabled: true,
        }, {
            label: '裤子',
            value: '3',
        }, {
            label: '鞋子',
            value: '4',
        }],
    },
];
class Menus extends Component {
    constructor(props) {
        super(props);
        this.onChange = this.onChange.bind(this);
        this.onOk = this.onOk.bind(this);
        this.onCancel = this.onCancel.bind(this);
        this.onMaskClick = this.onMaskClick.bind(this);
        this.handleClick = this.handleClick.bind(this);
        this.state = {
            initData: '',
            show: false,
        };
    }
    onChange(value) {
        let label = '';
        // debugger
        data.forEach((dataItem) => {
            if (dataItem.value === value[0]) {
                label = dataItem.label;
                if (dataItem.children && value[1]) {
                    dataItem.children.forEach((cItem) => {
                        if (cItem.value === value[1]) {
                            label += ` ${cItem.label}`;
                        }
                    });
                }
            }
        });
        console.log(label);
    }
    onOk(value) {
        console.log(value);
        this.onCancel();
    }
    onCancel() {
        this.setState({ show: false });
    }
    handleClick(e) {
        e.preventDefault(); // Fix event propagation on Android
        this.setState({
            show: !this.state.show,
        });
        // mock for async data loading
        if (!this.state.initData) {
            setTimeout(() => {
                this.setState({
                    initData: data,
                });
            }, 500);
        }
    }

    onMaskClick() {
        this.setState({
            show: false,
        });
    }
    render() {
        const { initData, show } = this.state;
        const menuEl = (
            <Menu
                className="foo-menu"
                data={initData}
                // value={['1', '2','3']}
                onChange={this.onChange}
                height={document.documentElement.clientHeight * 0.6}
            />
        );
        const loadingEl = (
            <div style={{ width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
                <ActivityIndicator size="large" />
            </div>
        );
        return (
            <div>
            <div className={show ? 'menu-active' : ''}>
                <div>
                    <NavBar
                        leftContent="分类"
                        mode="light"
                        icon={<img src="https://gw.alipayobjects.com/zos/rmsportal/iXVHARNNlmdCGnwWxQPH.svg" className="am-icon am-icon-md" alt="" />}
                        onLeftClick={this.handleClick}
                        className="top-nav-bar"
                        multiSelect
                    >
                        多选
                    </NavBar>
                </div>
                {show ? initData ? menuEl : loadingEl : null}
                {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
            </div>
            <Link to='/tabes'>跳转页面</Link>
            </div>
        );
    }

    // render() {
    //     const { initData, show } = this.state;
    //     const menuEl = (
    //         <Menu
    //             className="single-multi-foo-menu"
    //             data={initData}
    //             value={['1']}
    //             level={1}
    //             onChange={this.onChange}
    //             onOk={this.onOk}
    //             onCancel={this.onCancel}
    //             height={document.documentElement.clientHeight * 0.6}
    //             multiSelect
    //         />
    //     );
    //     const loadingEl = (
    //         <div style={{ position: 'absolute', width: '100%', height: document.documentElement.clientHeight * 0.6, display: 'flex', justifyContent: 'center' }}>
    //             <ActivityIndicator size="large" />
    //         </div>
    //     );
    //     return <div>
    //         menu
    //         <div className={show ? 'single-multi-menu-active' : ''}>
    //             <div>
    //                 <NavBar
    //                     leftContent="分类推荐"
    //                     mode="light"
    //                     onLeftClick={this.handleClick}
    //                     className="single-multi-top-nav-bar"
    //                 >
    //                    多选
    //                 </NavBar>
    //                     </div>
    //                     {show ? initData ? menuEl : loadingEl : null}
    //                     {show ? <div className="menu-mask" onClick={this.onMaskClick} /> : null}
    //             </div>
    //     </div>
    // }
}
export default Menus;


// let A=()=>{
//     return new Promise((rev,reb)=>{
//         document.getElementById('xxA').onClick=()=>{
//             rev('a');
//         }
//     })
// }
// let b =()=>{
//     document.getElementById('XXb').onclick=()=>{
//         return new Promise((rev,reb)=>{
//             rev('b');
//         })
//     }
// }
// let isAFirst=true;
// A().then((name)=>{
//     console.log(name);
//     if(isAFirst){
//         B().then((name=>{
//             console.log(name);
//         }))
//     }
// })